<template>
  <div class="h-container">
    <div class="h-container-content">
      <div class="h-container-content-print" id="printArea">
        <div class="h-container-content-print-title">
          <span>群兴寿服殡仪收费项目</span>
        </div>
        <div class="h-container-content-print-content">
          <div class="h-container-content-print-content-base">
            <div class="h-container-content-print-content-base-left">
              <div class="h-container-content-print-content-base-left-col">
                <span>故者：XXXXX</span>
              </div>
              <div class="h-container-content-print-content-base-left-col">
                <span>性别：XXXXX</span>
              </div>
              <div class="h-container-content-print-content-base-left-col">
                <span>属相：XXXXX</span>
              </div>
              <div class="h-container-content-print-content-base-left-col">
                <span>联系电话：XXXXX</span>
              </div>
            </div>
            <div class="h-container-content-print-content-base-right">
              <div class="h-container-content-print-content-base-right-col">
                <span>礼仪师：XXXXX</span>
              </div>
              <div class="c-base-right-col">
                <span>联系电话：XXXXX</span>
              </div>
            </div>

          </div>
          <table class="h-container-content-print-content-table">
            <thead>
            <tr>
              <th colspan="6">项目</th>
              <th class="h-container-content-print-content-table-mount1">单价</th>
              <th class="h-container-content-print-content-table-mount1">总金额</th>
              <th colspan="6">项目</th>
              <th class="h-container-content-print-content-table-mount1">单价</th>
              <th class="h-container-content-print-content-table-mount1">总金额</th>
            </tr>
            </thead>
            <tbody>
            <!--              服务费、寿盒            -->
            <template>
              <tr style="background: #d9e1f4">
                <td rowspan="8" style="vertical-align: middle; width: 80px;">服务费</td>
                <td rowspan="7" style="vertical-align: middle;">遗体处理</td>
                <td rowspan="6">普通遗体</td>
                <td colspan="3">净身穿衣（人/次）</td>
                <td>单价</td>
                <td>金额</td>
                <td rowspan="8" style="vertical-align: middle; width: 80px;">寿盒</td>
                <td>玉石</td>
                <td colspan="4">——————</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr style="background: #d9e1f4">
                <td colspan="3">抬体（人）</td>
                <td>单价</td>
                <td>金额</td>
                <td rowspan="6">木质</td>
                <td rowspan="5" colspan="4">自定义</td>
<!--                <td>动物图案</td>-->
<!--                <td colspan="3">龙、凤、仙鹤</td>-->
                <td rowspan="5">单价</td>
                <td rowspan="5">金额</td>
              </tr>
              <tr style="background: #d9e1f4">
                <td colspan="3">化妆（次）</td>
                <td>单价</td>
                <td>金额</td>
<!--                <td>植物图案</td>-->
<!--                <td colspan="3">梅兰竹菊荷花</td>-->
<!--                <td>单价</td>-->
<!--                <td>金额</td>-->
              </tr>
              <tr style="background: #d9e1f4">
                <td colspan="3">拔引流管、鼻饲</td>
                <td>单价</td>
                <td>金额</td>
<!--                <td>吉祥寓意</td>-->
<!--                <td colspan="3">富贵苑、如意人生</td>-->
<!--                <td>单价</td>-->
<!--                <td>金额</td>-->
              </tr>
              <tr style="background: #d9e1f4">
                <td colspan="3">造瘘处理</td>
                <td>单价</td>
                <td>金额</td>
<!--                <td rowspan="2">宗教主题</td>-->
<!--                <td colspan="3">基督-天使</td>-->
<!--                <td>单价</td>-->
<!--                <td>金额</td>-->
              </tr>
              <tr style="background: #d9e1f4">
                <td colspan="3">女性服务</td>
                <td>单价</td>
                <td>金额</td>
<!--                <td colspan="3">佛教-莲花、经文</td>-->
<!--                <td>单价</td>-->
<!--                <td>金额</td>-->
              </tr>
              <tr style="background: #d9e1f4">
                <td>特殊遗体</td>
                <td colspan="3">肥胖遗体、高度腐败、意外事故</td>
                <td>单价</td>
                <td>金额</td>
                <td>棺材</td>
                <td colspan="3">————</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr style="background: #d9e1f4">
                <td>海葬</td>
                <td colspan="4">集体免费海葬、包船海葬、豪华海葬</td>
                <td>单价</td>
                <td>金额</td>
                <td>降解罐</td>
                <td colspan="4">绿色筒罐、白色莲花罐</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
            </template>
            <!--              寿衣、小物件            -->
            <template>
              <tr>
                <td rowspan="21" colspan="2" style="vertical-align: middle; width: 80px;">寿衣</td>
                <td rowspan="6">套装（三件套）</td>
                <td rowspan="3">男士</td>
                <td colspan="2">唐装</td>
                <td>单价</td>
                <td>金额</td>
                <td rowspan="21" style="vertical-align: middle; width: 80px;">小物件</td>
                <td>一次性物品</td>
                <td colspan="4">手套、毛巾、棉球、折叠盆、敷料贴</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td colspan="2">西装</td>
                <td>单价</td>
                <td>金额</td>
                <td>遗像</td>
                <td colspan="4">相框+相</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td colspan="2">中山装</td>
                <td>单价</td>
                <td>金额</td>
                <td>灵位牌</td>
                <td colspan="4">树脂、玉石、刻字</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td rowspan="3">女士</td>
                <td colspan="2">唐装</td>
                <td>单价</td>
                <td>金额</td>
                <td>童男女</td>
                <td colspan="4">陶瓷、水晶、玉石</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td colspan="2">古装、旗袍</td>
                <td>单价</td>
                <td>金额</td>
                <td>狮子</td>
                <td colspan="4">陶瓷、水晶、玉石</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td colspan="2">现代装</td>
                <td>单价</td>
                <td>金额</td>
                <td>元宝</td>
                <td colspan="4"></td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td rowspan="5">单品/两件套</td>
                <td>衬衣衬裤</td>
                <td rowspan="5" colspan="2">
                  <div style="text-align: left;">材质：棉、真丝</div>
                  <div style="text-align: left;">款式：常规款、加大款、定制款</div>
                </td>
                <td>单价</td>
                <td>金额</td>
                <td>牛</td>
                <td colspan="4"></td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>棉衣棉裤</td>
                <td>单价</td>
                <td>金额</td>
                <td>马</td>
                <td colspan="4"></td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>夹衣夹裤</td>
                <td>单价</td>
                <td>金额</td>
                <td>聚宝盆</td>
                <td colspan="4"></td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>大袍</td>
                <td>单价</td>
                <td>金额</td>
                <td>十二生肖</td>
                <td colspan="4"></td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>斗篷</td>
                <td>单价</td>
                <td>金额</td>
                <td>骨灰三件套</td>
                <td colspan="4">包盒红布、盖单、骨灰袋</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td rowspan="8">配件（男、女）</td>
                <td>被褥</td>
                <td colspan="2">铺金盖红、彩色被褥</td>
                <td>单价</td>
                <td>金额</td>
                <td>十字架三件套</td>
                <td colspan="4">包盒红布、盖单、骨灰袋</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>旌单</td>
                <td colspan="2">普通款、烫金款</td>
                <td>单价</td>
                <td>金额</td>
                <td>铺金盖银</td>
                <td colspan="4"></td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>鞋子</td>
                <td colspan="2">刺绣棉鞋、西式棉鞋</td>
                <td>单价</td>
                <td>金额</td>
                <td>孝带、孝牌</td>
                <td colspan="4"></td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>帽子</td>
                <td colspan="2">礼帽、棉帽、唐帽</td>
                <td>单价</td>
                <td>金额</td>
                <td>孝衫</td>
                <td colspan="4"></td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>手宝</td>
                <td colspan="2">普通、高级</td>
                <td>单价</td>
                <td>金额</td>
                <td>引魂幡</td>
                <td colspan="4"></td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>头脚枕</td>
                <td colspan="2">普通、高级</td>
                <td>单价</td>
                <td>金额</td>
                <td>麒麟</td>
                <td colspan="4"></td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td rowspan="2">佩饰</td>
                <td colspan="2">围巾、丝巾</td>
                <td>单价</td>
                <td>金额</td>
                <td>长青松</td>
                <td colspan="4"></td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td colspan="2">胸针、徽章、玉佩</td>
                <td>单价</td>
                <td>金额</td>
                <td>如意</td>
                <td colspan="4"></td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td rowspan="2">宗教</td>
                <td>基督</td>
                <td colspan="2">教服、被褥</td>
                <td>单价</td>
                <td>金额</td>
                <td>葫芦</td>
                <td colspan="4"></td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>佛教</td>
                <td colspan="2">陀罗尼旌被</td>
                <td>单价</td>
                <td>金额</td>
                <td>酒</td>
                <td colspan="4"></td>
                <td>单价</td>
                <td>金额</td>
              </tr>
            </template>

            <!--            灵堂、殡仪服务套餐          -->
            <template>
              <tr style="background: #d9e1f4">
                <td rowspan="5" colspan="2">灵堂</td>
                <td>贡品</td>
                <td colspan="3">普通/佛教素菜</td>
                <td>单价</td>
                <td>金额</td>
                <td rowspan="5">
                  <div>殡仪</div>
                  <div>服务</div>
                  <div>套餐</div>
                </td>
                <td>A</td>
                <td colspan="4" style="text-align: left">寿衣、寿盒、服务费......</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr style="background: #d9e1f4">
                <td rowspan="4">物品</td>
                <td rowspan="4" colspan="3">
                  <div style="text-align: left">奠字布、长明灯、贡盘、香、香炉、酒杯、</div>
                  <div style="text-align: left">筷子、泥盆、起灵炮、孝带、孝牌</div>
                </td>
                <td>单价</td>
                <td>金额</td>
                <td>B</td>
                <td colspan="4" style="text-align: left">寿衣、寿盒、服务费、盘缠......</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr style="background: #d9e1f4">
                <td>单价</td>
                <td>金额</td>
                <td>C</td>
                <td colspan="4" style="text-align: left">寿衣、寿盒、服务费、盘缠......</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr style="background: #d9e1f4">
                <td>单价</td>
                <td>金额</td>
                <td>D</td>
                <td colspan="4" style="text-align: left">寿衣、寿盒、服务费、盘缠......</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr style="background: #d9e1f4">
                <td>单价</td>
                <td>金额</td>
                <td colspan="5">服务费套餐</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
            </template>

            <!--            烧盘缠、下葬          -->
            <template>
              <tr>
                <td rowspan="12" colspan="2">
                  <div>烧盘缠</div>
                  <div>（纸扎物品）</div>
                </td>
                <td rowspan="2">套装</td>
                <td>牛全套</td>
                <td colspan="2">大、中、小</td>
                <td>单价</td>
                <td>金额</td>
                <td rowspan="12">下葬</td>
                <td rowspan="11">随葬品</td>
                <td>套装</td>
                <td colspan="3">陶瓷、树脂、水晶、玉石</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>马全套</td>
                <td colspan="2">大、中、小</td>
                <td>单价</td>
                <td>金额</td>
                <td rowspan="10">单品</td>
                <td colspan="3">精雕狮子</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td rowspan="9">单品</td>
                <td>牛</td>
                <td rowspan="2" colspan="2">大、中、小</td>
                <td>单价</td>
                <td>金额</td>
                <td colspan="3">汉白玉香炉</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>马</td>
                <td>单价</td>
                <td>金额</td>
                <td colspan="3">七星板</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>鹤</td>
                <td colspan="2"></td>
                <td>单价</td>
                <td>金额</td>
                <td colspan="3">金砖</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>鹿</td>
                <td colspan="2"></td>
                <td>单价</td>
                <td>金额</td>
                <td colspan="3">金龟</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>烧纸</td>
                <td colspan="2"></td>
                <td>单价</td>
                <td>金额</td>
                <td colspan="3">四罐</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>元宝</td>
                <td colspan="2"></td>
                <td>单价</td>
                <td>金额</td>
                <td colspan="3">金、银山</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>金砖</td>
                <td colspan="2"></td>
                <td>单价</td>
                <td>金额</td>
                <td colspan="3">撒路钱</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>包袱</td>
                <td colspan="2"></td>
                <td>单价</td>
                <td>金额</td>
                <td colspan="3">合葬搭桥</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>寒衣</td>
                <td colspan="2"></td>
                <td>单价</td>
                <td>金额</td>
                <td colspan="3">家用电器</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
              <tr>
                <td>烧七</td>
                <td colspan="3">船、桥、金银山、轿车、楼房、家用电器、麻将桌</td>
                <td>单价</td>
                <td>金额</td>
                <td>服务</td>
                <td>议价</td>
                <td colspan="3">下葬、下葬车、迁坟</td>
                <td>单价</td>
                <td>金额</td>
              </tr>
            </template>

            </tbody>
          </table>

          <div class="h-container-content-print-content-other">
            <div class="h-container-content-print-content-other-row">
              备注：XXXX
            </div>
            <div class="h-container-content-print-content-other-row">
              总计：XXXX
            </div>
            <div class="h-container-content-print-content-other-row">
              承诺不以任何借口收取账单以外费用，以上费用均认可家属签字殡葬用品特殊概不退换。
            </div>
            <div class="h-container-content-print-content-other-row">
              <div class="h-container-content-print-content-other-row-col">大连群兴寿服负责人（投诉）电话：15640904777</div>
            </div>
            <div class="h-container-content-print-content-other-row">
              家属签字：
            </div>
          </div>
        </div>
      </div>

      <div class="h-container-content-btn">
        <div class="h-container-content-btn-close" @click="onClose">关闭</div>
        <div class="h-container-content-btn-print" v-print="print">打印</div>
      </div>
    </div>
  </div>
</template>

<script src="./preview.js" />

<style scoped lang="scss" src="./preview.scss" />

<style media="print" lang="scss">
@page {
  size: 1500px;
  //padding: 0 10px;
}

@media print {
  html {
    height: auto;
  }
  table {
    page-break-after: always; /* 在每个表格后进行分页 */
  }
  tr {
    page-break-inside: avoid; /* 避免在行内分页 */
  }
}
</style>
